<template>
    <div class="con">
        <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">
        <div class="header">
            <img src="../assets/images/giftwood.png" alt="" onclick="return false">
            <img src="../assets/images/btn_MyTicket_Active.png" alt="" class="myticket" onclick="return false">
            <router-link to="/myPoints">
                <img src="../assets/images/btn_MyPoints.png" alt="" class="mypoints" >
            </router-link>
        </div>
        <div class="ticketlist" v-for="item,index in data">
            <img src="../assets/images/MyTicket_wood.png" alt="" class="myticket_wood" onclick="return false">
            <img :src="siteImageUrl+item.title_img" alt="" class="title" onclick="return false">
            <img :src="siteImageUrl+item.thumb" alt="" class="fare" onclick="return false">
            <div class="woods" v-for="item1 in data[index].tickets">
                <img src="../assets/images/ticket_wood.png" alt="" class="wood" onclick="return false">
                <p  class="shop">{{item1.store}} <span class="num">x{{item1.count}}</span></p>
                <p class="timer">时间:{{item1.time}}</p>
                <address>{{item1.address}}</address>
                <!-- 验票按钮 -->
                <img src="../assets/images/btn_cash.png" alt="" class="btn" @click.prevent="checkTicket(item1.code,item1.title_img)">
               
            </div>  
            <div id="erweima"></div>             
        </div>          
    </div>
</template>

<script>
export default {
    name: "myTicket",
    data() {
        return {
            data: [],
            tickets: []
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_MyPoints";
    },
    methods: {
        checkTicket(code, title_img) {
            console.log(code, title_img);
            this.$router.push({
                name: "QRCode",
                params: { code: code, title_img: title_img }
            });
        }
    },
    mounted: function() {
        var qs = require("qs");
        this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/user_ticket`,
            data: qs.stringify({
                member_id: $.cookie("osc_member_id"),
                token: $.cookie("osc_member_token")
            })
        })
            .then(response => {
                if (response.data.status == 1) {
                    this.data = response.data.data;
                } else {
                    alert("请求失败：" + response.data.msg);
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con img {
    width: 100%;
}
.con .header {
    position: relative;
}
.con .logo {
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 30%);
}
.con .myticket {
    position: absolute;
    left: 20%;
    top: 55%;
    width: 30%;
}
.con .mypoints {
    position: absolute;
    right: 22%;
    top: 54%;
    width: 30%;
}
.con .ticketlist {
    position: relative;
}
.con .myticket_wood {
    margin-top: -4%;
    left: 0%;
}
.con .title {
    width: 30%;
    position: absolute;
    left: 12%;
    top: 12px;
    z-index: 100;
}

.con .fare {
    position: absolute;
    width: 26%;
    z-index: 100;
    right: 10%;
    top: 0%;
}

.con .woods {
    position: relative;
}
.con .woods .shop {
    font-size: 16px;
    color: #fff;
    position: absolute;
    left: 11%;
    top: 0%;
    vertical-align: baseline;
}
.con .woods .shop .num {
    color: #000;
    background: #fff;
    font-size: 12px;
    border-radius: 100px;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    position: absolute;
    top: 0px;
    right: -26px;
}
.con .woods .timer {
    font-size: 10px;
    color: #fff;
    position: absolute;
    right: 9%;
    top: 0%;
}
.con .woods address {
    color: #fff;
    position: absolute;
    left: 11%;
    top: 24px;
    font-size: 8px;
}
.con .wood {
    margin-left: 0%;
    margin-top: -3%;
}
.con .btn {
    width: 20%;
    position: absolute;
    z-index: 100;
    right: 10%;
    top: 30%;
}
</style>
